基于浏览器的HTML5地理定位 |
您所在的位置:网站首页 › 浏览器 地理位置怎么设置出来 › 基于浏览器的HTML5地理定位 |
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo,获取浏览器经纬度,并用腾讯地图(大家可以选择自己喜欢的地图)显示出来,实现的最终效果如下图所示: 一、检测浏览器是否支持: if (navigator.geolocation) { //console.log("浏览器支持!"); } else { // console.log("浏览器不支持!"); } 二、navigator.geolocation用于获取基于浏览器的当前用户地理位置,提供了3个方法:
void getCurrentPosition(onSuccess,onError,options); //获取用户当前位置
int watchCurrentPosition(onSuccess,onError,options); //持续获取当前用户位置
void clearWatch(watchId); //watchId 为watchCurrentPosition返回的值 //取消监控
参数详细说明见下表: 参数 功能 返回参数 是否必选 onSuccess 方法成功时候的回调,返回position对象,通过这个对象可以获取地理位置的相关信息 Coords
返回当前位置的坐标
Coordinates 必须 Timestamp
返回获取坐标信息的时间
字符串 onError 方法失败时候的回调,返回error对象,通过这个对象返回错误类型 Code
返回代表错误类型的代码
有如下数值 : 1用户未授权使用地理定位功能 2不能确定位置 3请求位置的尝试已超时 可选 message
返回描述错误的字符串
字符串 options 额外参数 enableHighAccuracy
告诉浏览器我们希望得到可能的高精度的地理信息
布尔值 可选 timeout
限制请求位置的时间,设置多少毫秒后会报告一个超时错误
数值 maximumAge
告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数
数值
三、代码实现 1、实现原理:html5地理定位 + 腾讯地图 2、实现思路: ① 判断浏览器是否支持geolocation地理定位 ② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度 ③ 调用腾讯地图接口,将获取到的经纬度以参数形式参入腾讯地图地理坐标中,并显示到页面上 PS:也可以调用百度地图、谷歌地图、高德地图等,只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中 3、代码实现: ①调用腾讯地图JavaScript API,URL路径为:http://map.qq.com/api/js?v=2.exp ②核心代码: 1 DOCTYPE html> 2 3 4 5 6 7 8 基于浏览器的HTML5地理定位 9 10 11 12 13 14 15 16 var clientWidth = document.documentElement.clientWidth, 17 clientHeight = document.documentElement.clientHeight; 18 var container = document.getElementById('container'); 19 container.style.width = clientWidth + 'px'; 20 container.style.height = clientHeight + 'px'; 21 22 function getLocation(){ 23 24 var options={ 25 enableHighAccuracy:true, //boolean 是否要求高精度的地理信息,默认为false 26 maximumAge:1000 //应用程序的缓存时间 27 } 28 29 if(navigator.geolocation){ 30 //浏览器支持geolocation 31 navigator.geolocation.getCurrentPosition(onSuccess,onError,options); 32 33 }else{ 34 //浏览器不支持geolocation 35 console.log("浏览器不支持!"); 36 } 37 } 38 39 //成功时 40 function onSuccess(position){ 41 //返回用户位置 42 //经度 43 var longitude =position.coords.longitude; 44 //纬度 45 var latitude = position.coords.latitude; 46 47 //腾讯地图的中心地理坐标 48 var center = new qq.maps.LatLng(latitude, longitude); 49 50 //使用腾讯地图API 51 var map = new qq.maps.Map(document.getElementById("container"), { 52 //地图的中心地理坐标 53 center: center, 54 //初始化地图缩放级别 55 zoom: 16 56 }); 57 58 //在地图中创建信息提示窗口 59 var infoWin = new qq.maps.InfoWindow({ 60 map: map 61 }); 62 //打开信息窗口 63 infoWin.open(); 64 //设置信息窗口显示区的内容 65 infoWin.setContent(''+ 66 '您在这里纬度:'+ latitude+ '经度:'+longitude); 67 //设置信息窗口的位置 68 infoWin.setPosition(center); 69 } 70 71 72 //失败时 73 function onError(error){ 74 switch(error.code){ 75 case error.PERMISSION_DENIED: 76 alert("用户拒绝对获取地理位置的请求"); 77 break; 78 79 case error.POSITION_UNAVAILABLE: 80 alert("位置信息是不可用的"); 81 break; 82 83 case error.TIMEOUT: 84 alert("请求用户地理位置超时"); 85 break; 86 87 case error.UNKNOWN_ERROR: 88 alert("未知错误"); 89 break; 90 } 91 92 } 93 94 window.onload=getLocation; 95 96 97DEMO演示
四、注意事项: 此代码在PC端运行,会得不到数据,因为获取位置信息,以及监控位置的变化这些操作都属于敏感性操作,所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。 在移动端,会提示是否允许地理位置授权,用户同意后,才会继续获取数据,进行下面的操作。
还有一点需要注意: 用HTML5 Geolocation API (地理位置应用程序接口)获得的经纬度参数,传入到腾讯地图,并显示出来后,会发现会有一定的偏移,这是因为我国把美国卫星的GPS的地球坐标,进行偏移的算法,计算后,得出了一个火星坐标。为了让火星坐标能正确的显示,又给每部导航软件加入了这个算法,可以在大家的地图上还原位置;而自己写的程序里没有加入此算法,所以出现了偏移问题,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |